
import './index.scss'

// 你已经封装好组件 ( 基础版本) =》echarts =》 友需要对这个echarts 进行封装（处理处属性）


//1 引入=》折线图
import LineEcharts from '../../EchartsCom/LineEcharts'
import { getLineDatas } from '../../https/Api/yiyuan'
import { useEffect, useState } from 'react'
import Ttest from './Ttest'
function Yiyuan() {
    // 发送请求得到后端的数据
    let barDatasObj = {}
    let [lineState, setLineState] = useState([])
    useEffect(() => {
        getyiyuanTopLineS()
    }, [])

    const getyiyuanTopLineS = () => {
        getLineDatas().then((res: any) => {
            console.log(res, 55554);
            if (res.code == 200) {

                setLineState(res.echartsList)
            }
        })




    }
    //  获取到样式 =》
    const getStyles = (index: number) => {
        if (index == 0) {

            return 'yiyuanTopS-One'
        } else {
            return 'yiyuanTopS'
        }
    }
    return (
        <div className="yiyuanBox">

            <div className='yiyuanTop glb-flex1'>
                {/*  <LineEcharts id="line" width={100} title="近7日挂号预约情况" barDatasObj={barDatasObj}></LineEcharts> */}
                {lineState.map((item: any, index) => {
                    return (
                        // 1 动态的样式  className = "     "
                        <div className={`${getStyles(index)}` + ' ' + "glb-flex1"} key={index} >
                            <div>
                                {/*  */}
                                <div>
                                    <i>icon</i>
                                </div>
                                <div>
                                    {item.nums}条
                                </div>
                            </div>
                            <div className='itemListRigth'>
                                <LineEcharts from={true}
                                    id={'line' + index + 1} height={100}
                                    width={100} barDatasObj={item.list}></LineEcharts>
                            </div>
                        </div>
                    )
                })}
            </div>
            {/*  */}
            <div>
                <h2>今日传播检测</h2>
                {/*  数据统计 */}
                {/* 布局 */}
                <div className='glb-flex1'>
                    < Ttest></Ttest>
                    {/* 表格组件 */}
                    < Ttest></Ttest>
                </div>
            </div>

        </div>
    )
}





export default Yiyuan